<template>
	<view class="shoppingCarts">
		<view class="cartbox">
			<view class="cartitem" v-for="(item,index) in shoppingCartsList">
				<view class="check">
					<u-checkbox-group >
						<u-checkbox  shape="circle" activeColor="red" size="20" @change="changeTotal(index)"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="pic">
					<image :src="item.snack_id[0].imageValue" mode="aspectFill">
				</view>
				<view class="des">
					<view class="desitem1">{{item.snack_id[0].name}}</view>
					<view class="desitem2">
						<text>${{item.snack_id[0].price}}</text>
					</view>
					<view class="desitem3"><u-number-box :min="0" v-model="item.number"  @plus="valChange(user_id,item.snack_id[0]._id,1)" @minus="valChange(user_id,item.snack_id[0]._id,-1)"></u-number-box></view>
				</view>
			</view>
		</view>
		
		<view class="pay">
			<view class="payitem1">
			 <u-checkbox-group >
			 	<u-checkbox shape="circle" activeColor="red" label="全选" size="20"  @change="ifallAhecked()"></u-checkbox>
			 </u-checkbox-group>
			<text>合计:{{total}}</text>
			</view>
			<view class="payitem2">
			<u-button  type="error"  text="全部支付" @click="gocheckOrder()"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	const db=uniCloud.database();
	const dbCmd=db.command;
	const cloudShoppingCarts = uniCloud.importObject("shoppingCarts");
	export default {
		data() {
			return {
				user_id:"",
				checked:true,
				allAhecked:true,
				shoppingCartsList:[],
				}
		},
		onShow() {
			
		},
		onLoad() {
			this.user_id = uni.getStorageSync("uni-id-pages-userInfo")._id
			this.getShoppingCarts();
		},
		computed:{
			total(){
				let total=0;
				for(let item of this.shoppingCartsList){
					if(item.checked){
					total+=item.snack_id[0].price*item.number
					}
				}
				return total;
			}
		},
		methods:{
			gocheckOrder(){
				uni.navigateTo({
					url:`/pages/order/checkOrder/checkOrder?&paysList=${JSON.stringify(this.shoppingCartsList)}`
				})
			},
			
			changeTotal(index){
				if(this.shoppingCartsList[index].checked){
					this.shoppingCartsList[index].checked=false
				}else{
					this.shoppingCartsList[index].checked=true
				}
			},
				
			
			
			//获取购物车列表
		   async getShoppingCarts(){
				const b= db.collection("Snacks").getTemp();
				const a= db.collection("shoppingCarts").where({
					user_id:this.user_id,
					number:dbCmd.neq(0)
				}).field("user_id,snack_id,number,checked").getTemp();
				let res= await db.collection(a,b).get();
				console.log(res.result.data);
				this.shoppingCartsList=res.result.data;
			},
			
			valChange(user_id,snack_id,value){
				cloudShoppingCarts.addCartNumber(user_id,snack_id,value).then(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shoppingCarts{
		height: var(--status-bar-height);
	}
.cartbox{
	width: var(--status-bar-width);
	.cartitem{
		box-sizing: content-box;
		padding:0 20rpx ;
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		.check{
			
		}
		.pic{
			margin-left:10rpx ;
			width: 150rpx;
			height: 150rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.des{
			box-sizing: content-box;
			display: flex;
			flex-direction: column;
			margin-left: 10rpx;
			height: 150rpx;
			width: 500rpx;
			justify-content: space-between;
			.desitem1{
					font-size: 30rpx;
				}
			.desitem2{
					font-size: 40rpx;
					color: red;
				}
			.desitem3{
					align-self:flex-end;
				}
		}
	}
	
}

.pay{
	width: 100%;
	position: fixed; 
	bottom: var(--window-bottom,0);
	background-color:white;
	box-sizing: content-box;
	padding:0 20rpx ;
	display: flex;
	justify-content: space-between;
	.payitem1{
		display: flex;
		width: 40%;
		align-items: center;
		justify-content: space-between;
	}
	.payitem2{
		width: 30%;
		align-items: center;
	}
}
</style>
